var imgArr = [];//图片数组
var imgArrType = [];//图片类型数组

/**
 * 唤起选择文件控件
 */
function onclickFile() {
    document.getElementById('toFileId').click();
}


/**
 * 选择图片后 回调文件处理
 * @param files
 */
function onchangeFile(files) {

    var file = files.files[0];
    var fileType = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length);//获取文件后缀

    var base64Img = "";
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        base64Img = reader.result; //获取到图片的base64编码
        imgArr.push(base64Img);//放入数组
        imgArrType.push(fileType);
        toImgList();//刷新数组 展示到页面
        document.getElementById('toFileId').value = "";//清掉刚选择的图片信息 不然不能连续选两张同样的文件
    };

}


/**
 * 加载图片列表
 */
function toImgList() {
    //删除图标
    var ico = "<svg class=\"icon\" style=\"width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1612\" data-spm-anchor-id=\"a313x.7781069.1998910419.i3\"><path d=\"M512 0C227.84 0 0 227.84 0 512s227.84 512 512 512c284.096 0 512-227.84 512-512S796.096 0 512 0L512 0zM768 696.32 696.256 768 512 583.68 327.616 768 256 696.32 440.256 512 256 327.68 327.616 256 512 440.32 696.256 256 768 327.68 583.616 512 768 696.32 768 696.32zM768 696.32\" p-id=\"1613\"></path></svg>";

    var textHtml = "";
    for (var i = 0; i < imgArr.length; i++) {
        textHtml += " <div style='    float: left;width: auto;height: 100px; margin-left: 10px;position: relative;'> " +
            "<img  style='width:auto; height: 100px' src=" + imgArr[i] + ">" +
            "<a onclick='deleteImg(" + i + ")' style='top:5px;right:5px;display:block; position:absolute;'>" + ico + "</a>" +
            "</div>";
    }
    $("#imgList").html(textHtml);
}

/**
 * 根据索引删除图片
 * @param i
 */
function deleteImg(i) {
    imgArr.splice(i, 1);
    imgArrType.splice(i, 1);
    toImgList();
}
